<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/bootstrap/css/bootstrap.min.css"/>
		<script src="../../static/js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div class="container" style="margin-top: 8%">
            <form id="main" v-cloak th:action="@{/User/list}">

                <div class="bar">
                    <!-- searchString 模型与文本域创建绑定 -->

                    <input type="text" v-model="searchString" name="userName"  placeholder="输入搜索内容" />
                </div>
                <button type="submit" class="btn btn-default">搜索</button>

            </form>
            <a class="btn btn-primary btn-sm" style="float: left;" type="button" th:href="@{/User/GoaddPage}">添加</a>
			<!--表格-->
			<table class="table table-bordered table-bover">
				<!--头-->
				<thead>
				
					<tr>
							<th  class="text-center">ID</th>
							<th  class="text-center">用户名</th>
							<th  class="text-center" >角色</th>
                            <th  class="text-center" >密码</th>
							<th  class="text-center">操作</th>
					</tr>
					
				</thead>
				<tbody>
					<tr class="text-center" th:each="user:${pageInfo.List}">
                        <td th:text="${user.id}"></td>
                        <td th:text="${user.userName}"></td>
                        <td th:text="${user.realName}"></td>
                        <td th:text="${user.passWord}"></td>
							<td>
                                <a class="btn btn-warning btn-sm" type="button" th:href="@{/User/GoeditPage(id=${user.id})}">编辑</a>
                                <a class="btn btn-danger btn-sm" type="button" th:href="@{/User/deleteUser(id=${user.id})}">删除</a>
							</td>
						</tr>
			
				</tbody>
			</table>
			<div class="modal-footer no-margin-top">
				<div class="col-md-6">
					当前第[[${pageInfo.pageNum}]]页|共 [[${pageInfo.pages}]] 页|一共 [[${pageInfo.total}]] 条记录
				</div>

				<ul class="pagination pull-right no-margin">
					<li th:if="${pageInfo.hasPreviousPage}">
						<a th:href="'/User/list?pageNum=1'">首页</a>
					</li>

					<li class="prev" th:if="${pageInfo.hasPreviousPage}">
						<a th:href="'/User/list?pageNum='+${pageInfo.prePage}">
							<i class="ace-icon fa fa-angle-double-left">上一页</i>
						</a>
					</li>
					<!--遍历条数-->
					<li th:each="nav:${pageInfo.navigatepageNums}">
						<a th:href="'/User/list?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
						<span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
					</li>

					<li class="next" th:if="${pageInfo.hasNextPage}">
						<a th:href="'/User/list?pageNum='+${pageInfo.nextPage}">
							<i class="ace-icon fa fa-angle-double-right">下一页</i>
						</a>
					</li>

					<li>
						<a th:href="'/User/list?pageNum='+${pageInfo.pages}">尾页</a>
					</li>
				</ul>
			</div>
		</div>
		<script>

		</script>
	</body>
</html>
